<template>
  <div class="my-projects-container">
    <!-- 页面标题 -->
    <h2 class="page-title">我的课题</h2>
    <el-button type="primary" @click="refreshProjects" style="margin-bottom: 15px;">刷新</el-button>

    <!-- 意向课题列表区域 -->
    <div v-if="intentionProjects.length > 0" class="intention-projects">
      <h3 class="section-title">意向课题 <span v-if="intentionProjects.length >= 3" style="color: #f56c6c;">（最多3个）</span></h3>
      <el-table :data="intentionProjects" style="width: 100%">
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column prop="name" label="课题名称" />
        <el-table-column prop="teacher" label="指导教师" />
        <el-table-column prop="direction" label="研究方向" />
        <el-table-column prop="volunteerOrder" label="志愿顺序" width="100">
          <template #default="scope">
            <el-select v-model="scope.row.volunteerOrder" @change="updateVolunteerOrder(scope.row)">
              <el-option v-for="n in intentionProjects.length" :key="n" :label="n" :value="n" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="mini" @click="removeFromIntention(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 已选课题区域 -->
    <div v-if="selectedProject" class="selected-project">
      <h3 class="section-title">已选课题</h3>
      <el-card>
        <div class="project-item"><span class="item-label">课题名称：</span>{{ selectedProject.name }}</div>
        <div class="project-item"><span class="item-label">指导教师：</span>{{ selectedProject.teacher }}</div>
        <div class="project-item"><span class="item-label">研究方向：</span>{{ selectedProject.direction }}</div>
        <div class="project-item">
          <span class="item-label">课题状态：</span>
          <el-tag :type="selectedProject.status === '已确认' ? 'success' : 'info'">{{ selectedProject.status }}</el-tag>
        </div>
        <div class="project-item"><span class="item-label">课题简介：</span>{{ selectedProject.introduction }}</div>
      </el-card>
    </div>

    <!-- 未选择课题提示 -->
    <div v-else-if="!hasIntentionProjects" class="no-projects">
      <p>您还没有选择课题</p>
      <el-button type="primary" @click="goToSelectProject">去选课题</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'; // 修正：添加 onMounted 导入
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const selectedProject = ref(null); // 已确认的课题
const intentionProjects = ref([]); // 意向课题列表

// 模拟数据 - 在实际应用中，这部分数据应该从后端获取
const mockIntentionProjects = [
  {
    id: 1,
    name: '智能校园导航系统设计与实现',
    teacher: '张教授',
    direction: '软件工程',
    volunteerOrder: 1
  },
  {
    id: 2,
    name: '基于深度学习的图像识别算法研究',
    teacher: '李教授',
    direction: '人工智能',
    volunteerOrder: 2
  }
];

const mockSelectedProject = {
  name: '智能校园导航系统设计与实现',
  teacher: '张教授',
  direction: '软件工程',
  status: '已确认',
  introduction: '本课题旨在设计并实现一个智能校园导航系统，帮助学生和访客在校园内快速找到目的地。系统将集成地图、定位和路径规划功能，提供友好的用户界面。'
};

// 页面加载时获取数据
onMounted(() => {
  refreshProjects();
});

function refreshProjects() {
  // TODO: 调用后端接口获取数据
  selectedProject.value = mockSelectedProject;
  intentionProjects.value = mockIntentionProjects;
}

// 更新志愿顺序
function updateVolunteerOrder(project) {
  // TODO: 调用后端接口更新志愿顺序
  ElMessage.success(`已更新"${project.name}"的志愿顺序为${project.volunteerOrder}`);
}

// 从意向课题中移除
function removeFromIntention(project) {
  // TODO: 调用后端接口删除
  intentionProjects.value = intentionProjects.value.filter(p => p.id !== project.id);
  ElMessage.success('已移除意向课题');
}

// 跳转到选课题页面
function goToSelectProject() {
  router.push('/project/selection');
}

// 判断是否有意向课题
const hasIntentionProjects = computed(() => intentionProjects.value.length > 0);
</script>

<style scoped>
.my-projects-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.section-title {
  margin-top: 30px;
  margin-bottom: 15px;
  color: #333;
}

.intention-projects, .selected-project {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.project-table th, .project-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.project-table th {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #333;
}

.project-table tr:last-child td {
  border-bottom: none;
}

.volunteer-select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.remove-btn {
  padding: 6px 12px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #e45959;
}

.project-card {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
}

.project-item {
  margin-bottom: 15px;
}

.item-label {
  font-weight: bold;
  margin-right: 10px;
}

.item-value {
  color: #666;
}

.project-intro {
  line-height: 1.6;
  margin-top: 10px;
}

.no-projects {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

.select-project-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.select-project-btn:hover {
  background-color: #3a7bc8;
}
</style>